

<template>
  <view class="container">
    <echarts
      ref="echarts"
      canvas-id="echarts"
      :option="option"
      style="width: 100%; height: 300px"
    >
    </echarts>
  </view>
</template>

<script>
import echarts from "@/components/echarts-uniapp/echarts-uniapp.vue";
export default {
  components: {
    echarts,
  },
  data() {
    return {
      option: {
        backgroundColor: "#ffffff",
        series: [
          {
            label: {
              normal: {
                fontSize: 14,
              },
            },
            type: "pie",
            center: ["50%", "50%"],
            radius: ["0%", "40%"],
            data: [
              {
                value: 55,
                name: "北京",
              },
              {
                value: 20,
                name: "武汉",
              },
              {
                value: 10,
                name: "杭州",
              },
              {
                value: 20,
                name: "广州",
              },
              {
                value: 38,
                name: "上海",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    // 确保在组件挂载后初始化图表
    this.$nextTick(() => {
      if (this.$refs.echarts) {
        // 手动初始化图表
        this.$refs.echarts.initChart();
      }
    });
  },
};
</script>

<style>
</style>